<div class="block-center mt-xl wd-xl">
  <!-- START panel-->
  <div class="panel panel-dark panel-flat">
    <div class="panel-heading text-center">
      <a href="#">
        <img src="assets/img/logo.png" alt="Image" class="block-center img-rounded" />
      </a>
    </div>
    <div class="panel-body">
      <p class="text-center pv">SIGN IN TO CONTINUE.</p>
      <form role="form" [formGroup]="loginForm"  class="form-validate mb-lg">
        <div class="form-group has-feedback">
          <input type="text" formControlName="username" placeholder="Enter username" autocomplete="off" class="form-control" required/>
          <span class="fa fa-envelope form-control-feedback text-muted"></span>
          <div *ngIf="loginForm.controls['username'].invalid && (loginForm.controls['username'].dirty || loginForm.controls['username'].touched)"
               class="alert alert-danger">
            <span *ngIf="loginForm.controls['username'].errors.required">This field is required</span>
            <span *ngIf="loginForm.controls['username'].dirty"> 用户名6-15位！</span>
          </div>
        </div>
        <div class="form-group has-feedback">
          <input type="password" formControlName="password" placeholder="Password" class="form-control" required/>
          <span class="fa fa-lock form-control-feedback text-muted"></span>
          <div *ngIf="loginForm.controls['password'].invalid &&
            (loginForm.controls['password'].dirty || loginForm.controls['password'].touched)"
               class="alert alert-danger">
            <span *ngIf="loginForm.controls['password'].errors.required">This field is required</span>
            <span *ngIf="loginForm.controls['password'].dirty">密码6-15位！</span>
          </div>
        </div>
        <div class="clearfix">
          <div class="checkbox c-checkbox pull-left mt0">
            <label>
              <input type="checkbox" value="" name="account_remember" />
              <span class="fa fa-check"></span>Remember Me</label>
          </div>
          <div class="pull-right">
            <a class="text-muted">Forgot your password?</a>
          </div>
        </div>
        <button type="submit" [disabled]="!loginForm.valid" (click)="login()" class="btn btn-block btn-primary mt-lg">登录</button>
      </form>
      <div class="alert alert-danger text-center">login.authMsg</div>
      <p class="pt-lg text-center">Need to Signup?</p><a class="btn btn-block btn-default">Register Now</a>
    </div>
  </div>
  <!-- END panel-->
  <div class="p-lg text-center">
    <span>&copy;</span>
    <span>{{settings.app.year}}</span>
    <span>-</span>
    <span>{{settings.app.name}}</span>
    <br/>
    <span>{{settings.app.description}}</span>
  </div>
</div>
